﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Basic Sparkline</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
    /*css_begin*/
        label {
            display:inline-block;
            width: 80px;
        }

        input[type="text"] {
            width: 80px;
            margin-right: 20px;
        }

        select {
            width: 84px;
        }

        input[type="button"] {
            width: 130px;
            margin-right: 20px;
            margin-left: 20px;
        }
    /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        var spreadNS = GcSpread.Sheets;

    $(document).ready(function () {
        var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
        initSpread(spread);
    });

    function initSpread(spread) {
        var sheet = spread.getSheet(0);
        sheet.isPaintSuspended(true);

        sheet.allowCellOverflow(true);

        sheet.setValue(0, 0, "Data Range is A2-A9");
        sheet.setValue(1, 0, 1);
        sheet.setValue(2, 0, -2);
        sheet.setValue(3, 0, -1);
        sheet.setValue(4, 0, 6);
        sheet.setValue(5, 0, 4);
        sheet.setValue(6, 0, -4);
        sheet.setValue(7, 0, 3);
        sheet.setValue(8, 0, 8);

        sheet.setValue(0, 2, "Date axis range is C2-C9");
        sheet.setValue(1, 2, new Date(2011, 0, 5));
        sheet.setValue(2, 2, new Date(2011, 0, 1));
        sheet.setValue(3, 2, new Date(2011, 1, 11));
        sheet.setValue(4, 2, new Date(2011, 2, 1));
        sheet.setValue(5, 2, new Date(2011, 1, 1));
        sheet.setValue(6, 2, new Date(2011, 1, 3));
        sheet.setValue(7, 2, new Date(2011, 2, 6));
        sheet.setValue(8, 2, new Date(2011, 1, 19));

        var data = new spreadNS.Range(1, 0, 8, 1);
        var dateAxis = new spreadNS.Range(1, 2, 8, 1);

        sheet.getCell(9, 0).text("Sparkline without dateAxis:");

        sheet.getCell(10, 0).text("(1) Line");
        sheet.getCell(10, 3).text("(2)Column");
        sheet.getCell(10, 6).text("(3)Winloss");

        //line
        sheet.addSpan(11, 0, 4, 3);
        var setting = new spreadNS.SparklineSetting();
        setting.showMarkers(true);
        setting.lineWeight = 3;
        setting.displayXAxis = true;
        setting.showFirst(true);
        setting.showLast(true);
        setting.showLow(true);
        setting.showHigh(true);
        setting.showNegative(true);
        sheet.setSparkline(11, 0, data
                , spreadNS.DataOrientation.Vertical
                , spreadNS.SparklineType.line
                , setting
        );

        //column
        sheet.addSpan(11, 3, 4, 3);
        setting = new spreadNS.SparklineSetting();
        setting.displayXAxis = true;
        setting.showFirst(true);
        setting.showLast(true);
        setting.showLow(true);
        setting.showHigh(true);
        setting.showNegative(true);
        sheet.setSparkline(11, 3, data
                , spreadNS.DataOrientation.Vertical
                , spreadNS.SparklineType.column
                , setting
        );

        //winloss
        sheet.addSpan(11, 6, 4, 3);
        setting = new spreadNS.SparklineSetting();
        setting.displayXAxis = true;
        setting.showNegative(true);
        sheet.setSparkline(11, 6, data
                , spreadNS.DataOrientation.Vertical
                , spreadNS.SparklineType.winloss
                , setting
        );

        sheet.getCell(15, 0).text("Sparkline with dateAxis:");

        sheet.getCell(16, 0).text("(1) Line");
        sheet.getCell(16, 3).text("(2)Column");
        sheet.getCell(16, 6).text("(3)Winloss");

        //line
        sheet.addSpan(17, 0, 4, 3);
        setting = new spreadNS.SparklineSetting();
        setting.showMarkers(true);
        setting.lineWeight = 3;
        setting.displayXAxis = true;
        setting.showFirst(true);
        setting.showLast(true);
        setting.showLow(true);
        setting.showHigh(true);
        setting.showNegative(true);
        sheet.setSparkline(17, 0, data
                , spreadNS.DataOrientation.Vertical
                , spreadNS.SparklineType.line
                , setting
                , dateAxis
                , spreadNS.DataOrientation.Vertical
        );

        //column
        sheet.addSpan(17, 3, 4, 3);
        setting = new spreadNS.SparklineSetting();
        setting.displayXAxis = true;
        setting.showFirst(true);
        setting.showLast(true);
        setting.showLow(true);
        setting.showHigh(true);
        setting.showNegative(true);
        sheet.setSparkline(17, 3, data
                , spreadNS.DataOrientation.Vertical
                , spreadNS.SparklineType.column
                , setting
                , dateAxis
                , spreadNS.DataOrientation.Vertical
        );

        //winloss
        sheet.addSpan(17, 6, 4, 3);
        setting = new spreadNS.SparklineSetting();
        setting.displayXAxis = true;
        setting.showNegative(true);
        sheet.setSparkline(17, 6, data
                , spreadNS.DataOrientation.Vertical
                , spreadNS.SparklineType.winloss
                , setting
                , dateAxis
                , spreadNS.DataOrientation.Vertical
        );

        sheet.isPaintSuspended(false);

        function getActualCellRange(cellRange, rowCount, columnCount) {
            if (cellRange.row == -1 && cellRange.col == -1) {
                return new spreadNS.Range(0, 0, rowCount, columnCount);
            }
            else if (cellRange.row == -1) {
                return new spreadNS.Range(0, cellRange.col, rowCount, cellRange.colCount);
            }
            else if (cellRange.col == -1) {
                return new spreadNS.Range(cellRange.row, 0, cellRange.rowCount, columnCount);
            }

            return cellRange;
        };

        $("#btnAddSparkline").click(function () {
            var sheet = spread.getActiveSheet();

            var range = getActualCellRange(sheet.getSelections()[0], sheet.getRowCount(), sheet.getColumnCount());
            var rc = $("#line_position").val().split(",");
            var r = parseInt(rc[0]);
            var c = parseInt(rc[1]);
            var orientation = parseInt($("#line_orientation").val());
            var type = parseInt($("#line_type").val());
            if (!isNaN(r) && !isNaN(c)) {
                sheet.setSparkline(r, c, range, orientation, type, new spreadNS.SparklineSetting());
            }
        });

        $("#btnClearSparkline").click(function () {
            var sheet = spread.getActiveSheet();

            var range = getActualCellRange(sheet.getSelections()[0], sheet.getRowCount(), sheet.getColumnCount());

            for (var r = 0; r < range.rowCount; r++) {
                for (var c = 0; c < range.colCount; c++) {
                    sheet.removeSparkline(r + range.row, c + range.col);
                }
            }
        });
    }
    /*code_end*/
    </script>

</head>
<body>
<div class="sample-turtorial">
    <div id="ss" style="width:100%; height:480px;border: 1px solid gray;"></div>
    <div class="demo-options">
        <div class="option-row">
            <label for="line_position">Position:</label>
            <input type="text" id="line_position" value="0,0" />
            <label for="line_type" style="width: auto;">Type:</label>
            <select id="line_type" class="position">
                <option value="0">line</option>
                <option value="1">column</option>
                <option value="2">winloss</option>
            </select>
        </div>
        <div class="option-row">
            <label for="line_orientation">Orientation:</label>
            <select id="line_orientation" class="position">
                <option value="0">Vertical</option>
                <option value="1">Horizontal</option>
            </select>
        </div>
        <div class="option-row">
            <input type="button" value="Add Sparkline" id="btnAddSparkline">
            <input type="button" value="Clear Sparkline" id="btnClearSparkline">
        </div>
    </div>
</div>
</body>
</html>
